body {
    margin: 0%; padding: 0%;
    overflow: hidden;
} /* Style for Webpage */

#canvas {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
} /* Style for Main Canva */

div#p5_loading {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large; font-weight: bold;
} /* Style for Loading Page */

#gadgets {
    width: 50%; margin: 0%; padding: 2% 4%;
    position: absolute; left: 50%; bottom: 0%;
    transform: translate(-50%, 90%);
    background-color: white;
    border-radius: 10px; z-index: 20;
    transition: ease-in-out 0.4s;
} /* Style for Main Gadgets */

#gadgets:hover {
    position: absolute; left: 50%; bottom: 0%;
    transform: translate(-50%, 32%);
    padding-bottom: 6%;
} /* Style for Main Gadgets */

#gadgets div#controls, .slider_container {
    width: 100%; margin: 0%; padding: 0%;
} /* Style for Control Units */

.slider_form {
    font-size: medium; font-weight: bold;
    width: 100%; margin: 0%; padding: 0%;
    display: flex; justify-content: space-between;
} /* Style for Control Forms */

.slider {
    appearance: none; width: 80%;
    background-color: transparent;
} /* Style for Sliders */

.slider::-webkit-slider-runnable-track {
    appearance: none;
    width: 100%; height: 8px;
    border-radius: 2px;
    background-color: whitesmoke;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider::-moz-range-track {
    -moz-appearance: none;
    width: 100%; height: 8px;
    border-radius: 2px;
    background-color: whitesmoke;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider:hover::-webkit-slider-runnable-track {
    box-shadow: inset 2px 2px 4px #bbbbbb,
              inset -2px -2px 4px #ffffff;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider:hover::-moz-range-track {
    box-shadow: inset 2px 2px 4px #bbbbbb,
              inset -2px -2px 4px #ffffff;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider:active::-webkit-slider-runnable-track {
    background-color: #ffffff;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider:active::-moz-range-track {
    background-color: #ffffff;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Runnable Track */

.slider::-webkit-slider-thumb {
    appearance: none; width: 36px; height: 10px;
    background-color: rgb(236, 236, 236);
    position: relative; top: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Slider Thumb */

.slider::-moz-range-thumb {
    -moz-appearance: none; width: 36px; height: 10px;
    background-color: rgb(236, 236, 236);
    position: relative; top: 4px;
    border-radius: 2px; border: 0px;
    transition: ease-in-out;
    transition-duration: 0.2s;
} /* Style for Slider Thumb */

.slider:hover::-webkit-slider-thumb {
    height: 16px; border-radius: 3px;
    box-shadow: 3px 3px 5px #bbbbbb,
              -3px -3px 5px #ffffff;
    background-color: whitesmoke;
} /* Style for Slider Thumb */

.slider:hover::-moz-range-thumb {
    height: 16px; border-radius: 3px;
    box-shadow: 3px 3px 5px #bbbbbb,
              -3px -3px 5px #ffffff;
    background-color: whitesmoke;
} /* Style for Slider Thumb */

div.infors div {
    font-size: x-small; font-weight: bold;
    width: 100%; margin: 0%; padding: 0%;
    display: flex; justify-content: space-around;
} /* Style for Control Forms */

.slider_container {
    color: #999999;
    transition: ease-in-out 0.2s;
    transition-delay: 0.6ms;
} /* Style for Control Texts */

.slider_container:hover {
    color: #252525;
} /* Style for Control Texts */

section#ambient {
    width: 100%; height: 100%; z-index: 10;
    position: absolute; left: 0%; top: 0%;
    background: rgb(26, 26, 26); opacity: 0%;
} /* Style for Ambient Light */
